<template>
  <div class="filter_box">
    <ul class="filter_ul">
      <li
        class="filter_list"
        :style="{ backgroundColor: item == get_filter ? '#065279' : '#177cb0'  }"
        v-for="(item, index) in get_filterList"
        :key="index"
        @click="changeFilter(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "FilterItem",
  computed: {
    ...mapGetters(["get_filterList", "get_filter" , 'get_searchValue']),
  },
  methods: {
    ...mapActions(["change_filter" , 'get_search' , 'get_hot']),
    changeFilter: function (value) {
      if(value == '热门'){
          this.get_hot()
      }else{
          this.get_search(this.get_searchValue)
      }
      this.change_filter(value);
    },
  },
};
</script>
<style>
.filter_box {
}
.filter_ul {
  display: flex;
}
.filter_list {
  list-style: none;
  color: white;
  font-size: 0.8em;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  margin: 0px 0.2em;
  cursor: pointer;
}
</style>